<template>
    <div class="comp-lesson-info">
        <img :src="data?.coverUrl" alt="">
        <div class="info">
            <h3 class="ellipsis">{{ data?.lessonName }}</h3>
            <p class="type-stage ellipsis">
                {{ reviewType[data?.reviewType] }} ｜ {{ stageSubject(data?.stageSubjectDTOList || []) }}
            </p>
            <p class="type-stage flex-between">
                <span>
                    <i class="iconfont icon-ruijiaoyan-tingpingke-shijian"></i>{{ dayjs(data?.startTime).format('YYYY.MM.DD HH:mm') }}-{{ dayjs(data?.endTime).format('YYYY.MM.DD HH:mm') }}
                </span>
                <span class="more" @click="changeShow">更多</span>
            </p>
        </div>
    </div>


    
</template>

<script setup>
import dayjs from 'dayjs'
const props = defineProps({
    data: {
        type: Object,
        default: () => {}
    },
    changeShow: {
        type: Function,
        required: true
    }
})

/**
 * @param reviewType 听评课课程类型
 * 1-课程分析 2-直播课程 3-现场评课
 */
const reviewType = {
    1: '课程分析',
    2: '直播课程',
    3: '现场评课',
}
function stageSubject(arr) {
    let str = ''
    arr.forEach(item => {
        let itemStr = `${item.stageName}：`
        item.subjectList.forEach(val => {
            itemStr += `${val.subjectName}、`
        })
        str += itemStr.slice(0, itemStr.length - 1) + '；'
    })
    return str.slice(0, str.length - 1)
}


</script>

<style lang='scss' scoped>
.comp-lesson-info {
    height: 210px;
    position: relative;
    .ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .flex-between {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    img {
        width: 100%;
        height: 100%;
    }
    .info {
        position: absolute;
        top: 0;
        padding: 108px 15px 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.74) 100%);
        h3 {
            width: 345px;
            font-size: 18px;
            font-weight: 600;
            color: #FFFFFF;
            line-height: 26px;
            margin-bottom: 8px;
        }
        .type-stage {
            width: 345px;
            font-size: 14px;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 22px;
            margin-bottom: 2px;
            .more {
                font-size: 13px;
                line-height: 20px;
            }
            .iconfont {
                font-size: 14px;
                margin-right: 5px;
            }
        }
    }
    
    

}
</style>